<template>
  <div class="managerStudentInfo">
    <section v-if="tabRouterNames.indexOf(activeName) !== -1" class="info-container tabPlane">
      <div class="pageContain">
        <el-tabs v-model="activeName">
          <el-tab-pane label="个人信息" name="counsellor_studentDetailInfo">
            <div @click="$router.push({ name: 'counsellor_studentList' })" class="goback">
              <i class="el-icon-arrow-left" style="font-size: 14px; vertical-align: middle;"></i>返回
            </div>
            <section class="page-content">
              <router-view></router-view>
            </section>
          </el-tab-pane>
          <el-tab-pane label="家庭信息" name="counsellor_studentFamilyDetailInfo">
            <div @click="$router.push({ name: 'counsellor_studentList' })" class="goback">
              <i class="el-icon-arrow-left" style="font-size: 14px; vertical-align: middle;"></i>返回
            </div>
            <section class="page-content">
              <router-view></router-view>
            </section>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
    <router-view v-else></router-view>
  </div>
</template>
<script>
import { routerPrevName } from '@/tools/utils'

export default {
  name: 'managerStudentInfo',
  data () {
    return {
      activeName: this.$route.name
    }
  },
  computed: {
    userType () {
      return this.$store.state.user.type
    },
    preName () {
      return routerPrevName(parseInt(this.userType))
    },
    tabRouterNames () {
      return [`${this.preName}_studentDetailInfo`, `${this.preName}_studentFamilyDetailInfo`]
    }
  },
  watch: {
    $route (route) {
      this.activeName = route.name
    },
    activeName (val) {
      if (this.tabRouterNames.indexOf(val) !== -1) {
        this.$router.push({name: val, query: this.$route.query})
        this.activeName = this.$route.name
      }
    }
  }
}
</script>
<style lang="less" scoped>
.page-content{
  margin: 20px;
  background-color: #fff;
  padding: 20px;
}
</style>
